<template>
  <div class="work-content">
    <van-nav-bar fixed placeholder title="项目工单" left-arrow @click-left="onClickLeft" />
    <div class="work-search">
      <div class="work-input">
        <text>关键字</text>
        <uni-easyinput v-model="inputValue" class="uni-mt-5" trim="all" placeholder="请输入内容" @input="input" />
      </div>
      <div class="btn-search">
        <div class="btn-mini btnOne" @click="clickSearch">
          <uni-icons type="search" size="20" color="#606266" />
        </div>
        <div class="btn-mini" @click="clickRefresh">
          <uni-icons type="loop" size="18" color="#606266" />
        </div>
      </div>
    </div>
    <van-tabs wrap-class="vant-tabs" :active="active" title-active-color="#739ECA" title-inactive-color="#666" color="#739ECA" line-width="16px" line-height="2px" @change="onChange">
      <van-tab v-for="tab in tabsTo" :key="tab.id" :title="tab.label" :name="tab.id">
        <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower" @refresherrefresh="handleRefresh">
          <work-list :work-list="workLists" :status="loadMoreStatus" @getTaskBugList="getTaskBugList" />
          <!-- <uni-load-more class="task-more" :status="loadMoreStatus" /> -->
        </ze-scroll>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import workList from './work-list.vue'
import ZeScroll from '@/components/ze-scroll/index.vue'
import { getTaskBugList } from '@/apis/project'

export default {
  components: { ZeScroll, workList },
  props: {
    datas: {
      type: Object,
    },
  },
  data() {
    return {
      moreStatus: 'more',
      pageNo: 1,
      pageSize: 10,
      active: 0,
      project: '',
      inputValue: '',
      projectBtn: 0,
      tabsTo: [
        { id: 0, label: '全部' },
        { id: 1, label: '未关闭' },
        { id: 2, label: '指派给我' },
      ],
      workLists: [],
    }
  },
  mounted() {
    this.getTaskBugList()
  },
  methods: {
    // tab改变事件
    onChange(value) {
      this.projectBtn = value.detail.name
      this.getTaskBugList()
    },
    onClickLeft() {
      uni.navigateBack() // 直接使用 navigateBack
    },
    input(e) {
      this.inputValue = e
    },
    clickRefresh() {
      this.inputValue = ''
      this.getTaskBugList()
    },
    clickSearch() {
      this.getTaskBugList()
    },
    async getTaskBugList() {
      uni.showLoading({
        title: '查询中',
      })
      if (this.pageNo > 1) {
        this.moreStatus = 'loading'
      }
      const params = { pageNo: this.pageNo, pageSize: this.pageSize, id: this.datas.id, bugName: this.inputValue }
      if (this.projectBtn === 1) {
        params.taskStatus = 'closed'
      } else if (this.projectBtn === 2) {
        params.commander = '1'
      }
      const res = await getTaskBugList(params)
      const { total, records } = res
      if (this.pageNo === 1) {
        this.workLists = records
      } else {
        this.workLists = [...this.workLists, ...records]
      }
      this.moreStatus = this.workLists.length >= total ? 'noMore' : 'more'
      uni.hideLoading()
    },
    async loadMore() {
      if (['noMore', 'loading'].includes(this.moreStatus)) {
        return
      }
      this.pageNo += 1
      this.getTaskBugList()
    },
    handleScrolltolower() {
      this.loadMore()
    },
    async handleRefresh() {
      this.pageNo = 1
      this.loadMoreStatus = 'loading'
      await this.getTaskBugList()
      this.loadMoreStatus = 'more'
    },
  },
}
</script>

<style lang="scss" scoped>
.work-content{

}
.work-search{
	padding:7px 0px;
	width: 94%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	.work-input{
		width: 60%;
		height: 30px;
		display: flex;
		text{
			padding-right: 10px;
			display: flex;
			align-items: center;
		}
	}
	.btn-search{
		display: flex;
		.btnOne{
			margin-right:5px;
		}
		.btn-mini{
			padding: 0px 5px;
			border-radius: 50%;
			background: #fff;
			border: 1px solid #dcdfe6;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.mini-btn{
		background: #739eca;
	}
}
</style>
<style lang="scss">
	.work-content{
		.content{
			padding-bottom:55px !important;
		}
	}
	.vant-tabs{
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06) !important;
	}
	.work-input view{
		height:100%;
	}
	.task-more{
		::v-deep view{
			height:55px !important;
			text{
				height:100%;
			}
		}
	}
</style>
